<!-- 菜单管理 -->
<template>
<div class="content-box">
  <FilterBox
    style="min-height: 38px;"
    :labelWidth="120"
    :buttonGroupArr="['refresh']"
    @refresh="getTableData"
  >
  </FilterBox>
  <div class="tableBox">
    <vxe-table
        ref="xTree"
        resizable
        border
        width="100%"
        height="100%"
        show-overflow
        :data="tableData"
        highlight-current-row
        @current-change="handleCurrentChange"
        :tree-config="{childrenField: 'son', expandAll: true}">
        <vxe-column type="seq" width="180" :title="$t('MenuManagementLang.num')"></vxe-column>
        <vxe-column field="m_name" :title="$t('MenuManagementLang.name')" width="300" tree-node>
        </vxe-column>
        <vxe-column field="url" :title="$t('MenuManagementLang.link')" width="180"> </vxe-column>
        <vxe-column field="sort" :title="$t('MenuManagementLang.sort')"> </vxe-column>
        <vxe-column field="is_hidden" :title="$t('MenuManagementLang.visible')">
        <!-- <template v-slot="{ row }">
            <span>{{ show(row.is_hidden) }}</span>
        </template> -->
        </vxe-column>
        <vxe-column field="route" :title="$t('MenuManagementLang.Permission')"> </vxe-column>
    </vxe-table>
  </div>
  <!-- 分页组件 -->
  <Pagination
    :isShow="false"
    @sendPushButton="pushButton"
  >
  </Pagination>
  <Add
      @success="getTableData"
      ref="add"
    ></Add>
    <Edit
      @success="getTableData"
      ref="edit"
    ></Edit>
</div>
</template>

<script>
import Add from "./MenuManagement_add";
import Edit from "./MenuManagement_edit";
export default {
  components: {
    Add,
    Edit,
  },
  data(){
    return{
      filterData:{
        page: "",
        limit: "30",
        order: "",
      },

      tableData: [],

      
      pageinfo: {
        number_all: 0,
      },
      sendDataObj:{},
    }
  },
  computed: {
      tabsId() {
          return this.$store.state.tabsId;
      }
  },
  mounted(){
    this.getTableData()
  },
  methods:{
    pushButton(route) {
      if (route == "add") {
        this.$refs.add.init();
      } else if (route == "edit") {
        if (JSON.stringify(this.sendDataObj) == "{}" || this.sendDataObj == null) {
          this.$message.warning(this.$t('common.message_warn_text'));
        } else {
          this.$refs.edit.init(this.sendDataObj);
        }
      } else if (route == "del") {
        if (JSON.stringify(this.sendDataObj) == "{}") {
          this.$message.warning(this.$t('common.message_warn_text'));
        } else {
          let params = new FormData();
          params.append("m_id", this.sendDataObj.m_id);
          this.$postForm("menuDel", params).then((res) => {
            if(res.success){
              this.$message.success(res.msg);
              this.getTableData();
            }
          });
        }
      }
    },
    // 获取表格数据
    getTableData(){
      this.$get("menulists").then((res) => {
        this.tableData = res.data;
        this.$nextTick(()=>{
          this.$refs.xTree.setAllTreeExpand(true)
        })
        this.sendDataObj={}
      });
    },//单选事件
    handleCurrentChange(data) {
      this.sendDataObj = data.row;
    },
  }
}
</script>
<style scoped lang="less">
.tableBox {
    height:100%;
    display: flex;
    overflow: hidden;
    .vxe-table{
        width: 100%;
    }
    /deep/ .vxe-header--column ,/deep/ .vxe-body--column ,/deep/ .vxe-footer--column{
        height: 22px;
        padding: 4px 0;
        color: #000;
        .vxe-cell,.vxe-cell--title{
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            .custom-sort{
                display: flex;
                flex-direction: column;
                margin-bottom: 3px;
                cursor: pointer;
                min-width: 10px;
                i{
                    height: 8px;
                    font-size: 12px;
                }
            }  
        }
    }
    /deep/ .vxe-header--column {
        background-color: #F0F4FE;
    }
    /deep/ .vxe-body--column{
        height: 30px;
        padding: 0;
        padding-bottom: 2px;
    }
    /deep/ .vxe-table--render-default .vxe-body--row.row--stripe {
        background-color: #EBEEF3;
    }
    /deep/ .vxe-table--render-default .vxe-body--row.row--current {
        background-color: #e6f7ff;
    }
    /deep/ .col--checkbox .vxe-cell{
        width: 100% !important;
        text-align: center;
    }
    /deep/ .vxe-cell span{
        overflow: hidden;
        text-overflow: ellipsis;
    }   
    /deep/ .vxe-checkbox--label{
        padding: 0;
    }
    /deep/ .col--tree-node .vxe-cell{
      justify-content: left;
    }
}
</style>